<template>
  <div class="goodContainer">
    <div class="goodLeft">
      <ul>
        <li
          v-for="(item, key) in goodsMenu"
          @click="chioseMenuFn(key)"
          :class="chioseIndex == key ? 'active' : ''"
          :key="key"
        >
          <span>{{ item }}</span>
        </li>
      </ul>
    </div>
    <div class="goodsRight" @scroll="scrollFn" ref="goodsEle">
      <div>
        <div v-for="(item, key) in goodsData" :key="key" ref="goodType">
          <div class="goodsType">{{ item.name }}</div>
          <div class="goodshow" v-for="(val, k) in item.foods" :key="k">
            <img class="goodimg" :src="val.icon" />
            <div class="goodsRightItem">
              <span class="pname">{{ val.name }}</span>
              <span class="sell"
                >月销售{{ val.sellCount }} 好评率{{ val.rating }}%</span
              >
              <span>￥{{ val.price }}</span>
              <add-cart @addNum="addCartNum"></add-cart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-for="(item, key) in judgeArr" :key="key">
      <transition
        :css="false"
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
      >
        <!-- 2个div  一个div 横着移动 一个 纵轴移动 -->
        <!-- 让2个div控制一个小球的运动  -->
        <div class="ball" v-show="item.show">
          <div class="inner"></div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import AddCart from "../addCart/AddCart";
export default {
  components: {
    AddCart,
  },
  data: function () {
    return {
      goodsMenu: [],
      goodsData: [],
      chioseIndex: 0,
      heightArr: [], // 记录食物分类的累加值
      judge: false,
      judgeArr: [
        {
          show: false,
        },
        {
          show: false,
        },
        {
          show: false,
        },
        {
          show: false,
        },
        {
          show: false,
        },
      ],
      ballpos: null,
    };
  },
  created: async function () {
    // 请求商品的数据
    let { data } = await this.$http.get("/api/goods");
    console.log(data);
    this.goodsData = data;
    data.forEach((item) => {
      this.goodsMenu.push(item.name);
    });
    this.$nextTick(() => {
      // console.log(this.$refs.goodType)
      let eles = this.$refs.goodType;
      let num = 0;
      eles.forEach((ele) => {
        this.heightArr.push(num);
        num += ele.offsetHeight;
      });
      console.log(this.heightArr);
    });

    // console.log(this.goodsMenu);
  },
  methods: {
    // 动画相关
    beforeEnter(el) {
      console.log("beforeEnter", el);
      console.log("??", this.ballpos);
      let x = this.ballpos.x - 80;
      let y = window.innerHeight - (this.ballpos.y + 100);
      // 外层的ball横着移动
      el.style.transform = `translate3d(${x}px,0,0)`;
      el.querySelector(".inner").style.transform = `translate3d(0,-${y}px,0)`;
    },
    enter(el, done) {
      el.offsetHeight; //重绘
      console.log("enter", el);
      el.style.transform = `translate3d(0px,0,0)`;
      el.querySelector(".inner").style.transform = `translate3d(0,-0px,0)`;
      el.addEventListener("transitionend", done);
    },
    afterEnter(el) {
      console.log("afterEnter", el);
      // 动画做完后，在让小球复位
      el.style.display = "none";
      // this.judge = false;
      this.judgeArr.forEach(item=>{
        item.show = false;
      })
    },

    chioseMenuFn(index) {
      console.log(index);
      this.chioseIndex = index;
      //  console.log(  this.$refs.goodsEle);
      // this.$refs.goodsEle.scrollTop = this.heightArr[index];
      let timer = setInterval(() => {
        if (this.$refs.goodsEle.scrollTop > this.heightArr[index]) {
          console.log(111);
          this.$refs.goodsEle.scrollTop -= 20;
        }

        if (this.$refs.goodsEle.scrollTop < this.heightArr[index]) {
          console.log(222);
          this.$refs.goodsEle.scrollTop += 20;
        }
        if (
          Math.abs(this.$refs.goodsEle.scrollTop - this.heightArr[index]) < 10
        ) {
          console.log("停止了");
          // + - 5px之间都会停止
          clearInterval(timer);
        }
      }, 1);
    },
    scrollFn(e) {
      // console.log(e);
      let scrollTopNum = e.target.scrollTop;
      // console.log(scrollTopNum);
      for (let i = 0; i < this.heightArr.length; i++) {
        if (typeof this.heightArr[i + 1] != "undefined") {
          if (
            scrollTopNum >= this.heightArr[i] &&
            scrollTopNum <= this.heightArr[i + 1]
          ) {
            // console.log("??",i);
            this.chioseIndex = i;
            break;
          }
        } else {
          this.chioseIndex = this.heightArr.length - 1;
        }
      }
    },
    addCartNum(addEle) {
      console.log("触发到父级", addEle);
      let posObj = addEle.getBoundingClientRect();
      // console.log(posObj);
      this.ballpos = posObj;
      // this.judge = true;
      for(let i=0;i<this.judgeArr.length;i++){
        if(!this.judgeArr[i].show){
          this.judgeArr[i].show = true;
          break;
        }
      }
    },
  },
};
</script>

<style>
.ball {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 20px;
  left: 70px;
  transition: .4s cubic-bezier(0, 0.97, 0.34, 1.24);
}
.inner {
  width: 50px;
  height: 50px;
  background: blue;
  border-radius: 50%;
  transition: .4s all;
}
.goodContainer {
  width: 750px;
  height: 890px;
  /* border: 1px solid; */
  display: flex;
}
.goodLeft {
  width: 160px;
  height: 890px;
  overflow: auto;
}
.goodLeft ul {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #f3f5f7;
}

.goodLeft span {
  text-align: center;
  height: 108px;
  width: 105px;
  display: flex;
  align-items: center;
  font-size: 24px;
  color: rgb(105, 109, 110);
  border-bottom: 2px solid rgba(7, 17, 27, 0.1);
}

.goodLeft li {
  width: 160px;
  height: 108px;
  display: flex;
  justify-content: center;
}
.active {
  background-color: red;
}

/* 商品右侧样式 */

.goodsRight {
  flex: 6;
  width: 590px;
  height: 890px;
  overflow: auto;
  /* border: 1px solid; */
}

.goodsType {
  width: 562px;
  height: 52px;
  background: #f3f5f7;
  padding-left: 28px;
  line-height: 52px;
  font-size: 24px;
  color: rgb(147, 153, 159);
}
.goodshow {
  width: 518px;
  height: 150px;
  /* border:1px solid; */
  border-bottom: 2px solid rgb(7, 17, 27, 0.1);
  margin-left: 36px;
  margin-top: 36px;
  position: relative;
}
.goodimg {
  width: 114px;
  height: 114px;
  margin-right: 20px;
}
.goodshow {
  display: flex;
}
.goodsRightItem {
  display: flex;
  flex-direction: column;
}
.pname {
  font-size: 28px;
  color: rgb(7, 17, 27);
  line-height: 28px;
  margin-bottom: 16px;
}

.sell {
  font-size: 20px;
  color: rgb(147, 153, 159);
  margin-bottom: 15px;
}
</style>